<template>
	<div class="setting-container animate-in">
		<!-- 顶部导航栏 -->
		<div class="nav-bar">
			<div class="back-btn" @click="goBack">
				<span>←</span>
			</div>
			<div class="title">设置</div>
			<div class="placeholder"></div>
		</div>

		<!-- 设置列表 -->
		<div class="setting-list">
			<!-- 用户信息设置 -->
			<div class="setting-group">
				<div class="setting-item" @click="navigateTo('/pages/user-setting/profile')">
					<div class="setting-icon">
						<span class="icon-text">👤</span>
					</div>
					<div class="setting-text">修改头像</div>
					<div class="setting-arrow">
						<span class="icon-text">❯</span>
					</div>
				</div>

				<div class="setting-item" @click="navigateTo('/pages/user-setting/nickname')">
					<div class="setting-icon">
						<span class="icon-text">📝</span>
					</div>
					<div class="setting-text">昵称</div>
					<div class="setting-value">152****1474</div>
					<div class="setting-arrow">
						<span class="icon-text">❯</span>
					</div>
				</div>

				<div class="setting-item" @click="navigateTo('/pages/user-setting/phone')">
					<div class="setting-icon">
						<span class="icon-text">📱</span>
					</div>
					<div class="setting-text">手机号</div>
					<div class="setting-value">15220841474</div>
					<div class="setting-arrow">
						<span class="icon-text">❯</span>
					</div>
				</div>

				<div class="setting-item" @click="navigateTo('/pages/user-setting/verification')">
					<div class="setting-icon">
						<span class="icon-text">✅</span>
					</div>
					<div class="setting-text">实名认证</div>
					<div class="setting-value">已认证</div>
					<div class="setting-arrow">
						<span class="icon-text">❯</span>
					</div>
				</div>

				<div class="setting-item" @click="navigateTo('/pages/user-setting/address')">
					<div class="setting-icon">
						<span class="icon-text">📍</span>
					</div>
					<div class="setting-text">收货地址</div>
					<div class="setting-arrow">
						<span class="icon-text">❯</span>
					</div>
				</div>
			</div>

			<!-- 安全设置 -->
			<div class="setting-group">
				<div class="setting-item" @click="navigateTo('/pages/user-setting/login-password')">
					<div class="setting-icon">
						<span class="icon-text">🔑</span>
					</div>
					<div class="setting-text">登录密码</div>
					<div class="setting-arrow">
						<span class="icon-text">❯</span>
					</div>
				</div>

				<div class="setting-item" @click="navigateTo('/pages/user-setting/security-password')">
					<div class="setting-icon">
						<span class="icon-text">🔒</span>
					</div>
					<div class="setting-text">安全密码</div>
					<div class="setting-arrow">
						<span class="icon-text">❯</span>
					</div>
				</div>
			</div>

			<!-- 其他设置 -->
			<div class="setting-group">
				<div class="setting-item" @click="navigateTo('/pages/user-setting/invite')">
					<div class="setting-icon">
						<span class="icon-text">👥</span>
					</div>
					<div class="setting-text">邀请好友</div>
					<div class="setting-arrow">
						<span class="icon-text">❯</span>
					</div>
				</div>

				<div class="setting-item" @click="navigateTo('/pages/user-setting/feedback')">
					<div class="setting-icon">
						<span class="icon-text">💬</span>
					</div>
					<div class="setting-text">意见反馈</div>
					<div class="setting-arrow">
						<span class="icon-text">❯</span>
					</div>
				</div>

				<div class="setting-item" @click="navigateTo('/pages/user-setting/about')">
					<div class="setting-icon">
						<span class="icon-text">ℹ️</span>
					</div>
					<div class="setting-text">关于我们</div>
					<div class="setting-arrow">
						<span class="icon-text">❯</span>
					</div>
				</div>

				<div class="setting-item delete-account-btn" @click="navigateTo('/pages/user-setting/delete-account')">
					<div class="setting-icon">
						<span class="icon-text">⚠️</span>
					</div>
					<div class="setting-text">注销账户</div>
					<div class="setting-arrow">
						<span class="icon-text">❯</span>
					</div>
				</div>
			</div>

			<!-- 退出登录 -->
			<div class="setting-group">
				<div class="setting-item logout-btn" @click="logout">
					<span class="logout-text">退出登录</span>
				</div>
			</div>
		</div>

		<!-- 底部 LOGO -->
		<div class="footer">
			<div class="logo">LianArt</div>
			<div class="platform-name">数字藏品平台</div>
		</div>
	</div>
</template>

<script>
	export default {
		name: 'SettingIndex',
		methods: {
			goBack() {
				uni.navigateBack();
			},
			navigateTo(url) {
				uni.navigateTo({
					url: url
				});
			},
			logout() {
				uni.showModal({
					title: '温馨提示',
					content: '确定要退出登录吗？',
					success: (res) => {
						if (res.confirm) {
							this.$store.commit('user/LOGOUT')
							uni.showToast({
								title: '已退出登录'
							})
							// 自动跳转到首页
							uni.switchTab({
								url: '/pages/main/home/index'
							})
						}
					}
				})
			}
		}
	}
</script>

<style scoped>
	.setting-container {
		background-color: #9BBFE0;
		min-height: 100vh;
		width: 100%;
		max-width: 100%;
		padding: 0;
		padding-top: var(--status-bar-height, 20px);
		/* 添加状态栏高度 */
		font-family: 'PingFang SC', 'Helvetica Neue', Arial, sans-serif;
		color: #333;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		overflow-x: hidden;
		/* 隐藏水平滚动条 */
	}

	/* 隐藏滚动条但保留滚动功能 */
	.setting-container::-webkit-scrollbar {
		display: none;
		/* Chrome, Safari, Opera */
	}

	.setting-list {
		flex: 1;
		padding: 16px;
		-ms-overflow-style: none;
		/* IE and Edge */
		scrollbar-width: none;
		/* Firefox */
		overflow-y: auto;
		overflow-x: hidden;
	}

	.setting-list::-webkit-scrollbar {
		display: none;
		/* Chrome, Safari, Opera */
	}

	/* 导航栏样式 */
	.nav-bar {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 16px;
		height: 56px;
		background-color: #9BBFE0;
	}

	.back-btn {
		font-size: 24px;
		cursor: pointer;
		width: 40px;
		text-align: left;
		color: #333;
	}

	.title {
		font-size: 18px;
		font-weight: 500;
		color: #333;
	}

	.placeholder {
		width: 40px;
	}

	/* 设置列表样式 */
	.setting-group {
		background: rgba(255, 255, 255, 0.9);
		border-radius: 16px;
		overflow: hidden;
		margin-bottom: 16px;
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
		animation: fadeIn 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
		opacity: 0;
	}

	.setting-item {
		padding: 16px;
		display: flex;
		align-items: center;
		border-bottom: 1px solid rgba(0, 0, 0, 0.05);
		cursor: pointer;
	}

	.setting-item:last-child {
		border-bottom: none;
	}

	.setting-icon {
		width: 24px;
		height: 24px;
		margin-right: 12px;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.setting-text {
		flex: 1;
		font-size: 15px;
	}

	.setting-value {
		font-size: 14px;
		color: #888;
		margin-right: 8px;
	}

	.setting-arrow {
		color: #ccc;
	}

	/* 图标文字样式 */
	.icon-text {
		font-size: 18px;
		display: inline-block;
		vertical-align: middle;
	}

	/* 退出登录按钮 */
	.logout-btn {
		justify-content: center;
		padding: 16px 0;
		display: flex;
		align-items: center;
	}

	.logout-text {
		color: #ff6b6b;
		font-weight: 500;
		font-size: 15px;
		white-space: nowrap;
	}

	/* 注销账号按钮 */
	.delete-account-btn {
		padding: 16px;
		display: flex;
		align-items: center;
		border-bottom: 1px solid rgba(0, 0, 0, 0.05);
	}

	.delete-account-btn .setting-text {
		color: #888;
	}

	/* 底部 LOGO */
	.footer {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 16px 0;
		opacity: 0.7;
		width: 100%;
		margin-top: auto;
		margin-bottom: 16px;
	}

	.logo {
		font-size: 16px;
		font-weight: 600;
		margin-bottom: 4px;
	}

	.platform-name {
		font-size: 13px;
	}

	/* 动画效果 */
	@keyframes fadeIn {
		from {
			opacity: 0;
			transform: translateY(10px);
		}

		to {
			opacity: 1;
			transform: translateY(0);
		}
	}

	.setting-group:nth-child(1) {
		animation-delay: 0.15s;
	}

	.setting-group:nth-child(2) {
		animation-delay: 0.25s;
	}

	.setting-group:nth-child(3) {
		animation-delay: 0.35s;
	}

	.setting-group:nth-child(4) {
		animation-delay: 0.45s;
	}

	/* 修改进入动画为缩放效果 */
	@keyframes scaleIn {
		from {
			transform: scale(1.1);
			opacity: 0;
		}

		to {
			transform: scale(1);
			opacity: 1;
		}
	}

	.animate-in {
		animation: scaleIn 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
		will-change: transform, opacity;
		backface-visibility: hidden;
		perspective: 1000;
		transform-origin: center;
		transform: translateZ(0);
	}
</style>